<template>
  <div class="wpas">
    <div class="container">
      <div class="form-horizontal" style="max-width:700px;min-width:280px;margin:0 auto;">
        <div class="form-group">
          <div class="col-sm-13">
            <input type="text" v-model="phone" class="form-control" name placeholder="手机号">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-13">
            <input type="text" class="form-control" v-model="pas" name placeholder="请输入密码">
          </div>
        </div>
        <div class="form-group d-flex flex-wrap">
          <div class="col-sm-4 code" v-show="show" @click="code">获取验证码</div>
          <div class="col-sm-4 code" v-show="!show">{{sj}}s</div>
          <div class="col-sm-8">
            <input type="password" class="form-control" v-model="cod" name placeholder="请输入验证码">
          </div>
        </div>
        <div class="form-group col-sm-13">
          <div class="btn col-sm-12" @click="geng">更改</div>
        </div>
        <div>
          <router-link to="/log">去登录</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { wpa, verify } from "../../api/api.js";
export default {
  name: "wpas",
  data() {
    return {
      sj: "",
      show: true,
      timer: null,
      phone: "",
      pas: "",
      cod: ""
    };
  },
  created() {},
  methods: {
    // 点击修改
    geng() {
      if (this.phone == "" || this.pas == "" || this.cod == "") {
        alert("请填写完整的信息");
      } else {
        wpa({
          phoneNumbers: this.phone,
          password: this.pas,
          verificationCode: this.cod
        }).then(res => {
          console.log(res);
          alert('修改完成,去登陆');
          this.$router.push('/log');
        });
      }
    },

    //   倒计时
    dao() {
      this.show = false;
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.sj = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.sj > 0 && this.sj <= TIME_COUNT) {
            this.sj--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取验证码
    code() {
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        alert("手机号码有误，请重填");
      } else {
        this.dao();
        verify({
          phoneNumbers: this.phone
        }).then(res => {
          console.log(res);
        });
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wpas {
  width: 100%;
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 30px;
}
input {
  border: none;
}

.col-center-block {
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.btn {
  height: 50px;
  line-height: 40px;
  background-color: #fa440cd8;
  border: none;
  color: #fff;
}
.btn:hover {
  background: #ff3c00;
}
.code {
  background: #fff;
  line-height: 35px;
  margin-bottom: 15px;
}
</style>
